<template>
  <div style="display:inline-block;width:100%">
    <div id="main" style="width: 100%;height:400px;" />
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer
])
export default {
  mounted() {
    var chartDom = document.getElementById('main')
    var myChart = echarts.init(chartDom)
    var option

    option = {
      title: {
        text: '价格数量分布',
        subtext: '套'
      },
      grid: {
        height: 300
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['公寓', '别墅', '酒店']
      },
      toolbox: {
        show: true,
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          // prettier-ignore
          data: ['1000', '2000', '3000', '4000', '5000']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '公寓',
          type: 'bar',
          data: [
            20.0, 44.9, 37.0, 23.2, 25.6
          ]
        },
        {
          name: '别墅',
          type: 'bar',
          data: [
            2.6, 5.9, 59.0, 26.4, 28.7
          ]
        },
        {
          name: '酒店',
          type: 'bar',
          data: [42.6, 5.9, 49.0, 46.4, 18.7]
        }
      ]
    }

    option && myChart.setOption(option)
  }
}
</script>

<style>

</style>
